<template>
  <div class="authority">
    <div class="unit-panel">
      <div class="unit-panel-item" style="background: #d9e9ff;">
        <img src="@/assets/wu_01.png" alt="">
        <div class="unit-panel-content">
          <div>楼栋数量</div>
          <div><span class="unit-panel-num" style="color: #3b7ac5;">{{ quanshuInfo.buildingNums }}</span></div>
        </div>
      </div>
      <div class="unit-panel-item" style="background: #e3ffee;">
        <img src="@/assets/wu_02.png" alt="">
        <div class="unit-panel-content">
          <div>产权证数量</div>
          <div><span class="unit-panel-num" style="color: #458e5c;">{{ quanshuInfo.certificateNums }}</span></div>
        </div>
      </div>
      <div class="unit-panel-item" style="background: #fff8e8;">
        <img src="@/assets/wu_03.png" alt="">
        <div class="unit-panel-content">
          <div>土地使用权总面积</div>
          <div><span class="unit-panel-num" style="color: #c68b1d;">{{ quanshuInfo.landUseRightArea }}</span> m²</div>
        </div>
      </div>
      <div class="unit-panel-item" style="background: #d7e9ff;">
        <img src="@/assets/wu_04.png" alt="">
        <div class="unit-panel-content">
          <div>房屋总建筑面积</div>
          <div><span class="unit-panel-num" style="color: #3b7ac5;"></span> m²</div>
        </div>
      </div>
      <div class="unit-panel-item" style="background: #dcd7ff;">
        <img src="@/assets/wu_01.png" alt="">
        <div class="unit-panel-content">
          <div>统一登记总建筑面积</div>
          <div><span class="unit-panel-num" style="color: #3b7ac5;">{{ quanshuInfo.buildingArea }}</span> m²</div>
        </div>
      </div>
    </div>
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true">
        <el-form-item label="产权证号">
          <el-input v-model="searchInfo.certificateNo" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="办公楼名称">
          <el-input v-model="searchInfo.buildingName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="searchInfo.address" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit">
            查询
          </el-button>
          <el-button icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="lists">
      <div class="item" v-for="item in tableData">
        <img src="@/assets/no_pic.jpg" alt="" class="img">
        <div class="right">
          <div class="top-title">
            <div>
              <img src="@/assets//ssdw.png" alt="" class="title-icon">
              <span style="font-weight: bold;">{{ item.buildingName }}</span>
              <!-- <span style="cursor: pointer;color: #508ee5;margin-left: 8px;" @click="openCard(item)">(查看楼栋卡片)</span> -->
            </div>
            <div>
              <img src="@/assets/qsgl.png" alt="" class="title-icon">
              <span>不动产权证({{ item.certificateNo }})</span>
            </div>
          </div>
          <div class="info">
            <div class="row">
              <div class="row-item">
                <div class="label">
                  权利人：
                </div>
                <div class="value">
                  {{ item.obligee }}
                </div>
              </div>
              <div class="row-item">
                <div class="label">
                  不动产单元号：
                </div>
                <div class="value">
                  {{ item.realEstateUnitNo }}
                </div>
              </div>
              <div class="row-item">
                <div class="label">
                  共有情况：
                </div>
                <div class="value">
                  {{ item.commonSituation==1?'共同共有':'单独所有' }}
                </div>
              </div>
            </div>
            <div class="row">
              <div class="row-item">
                <div class="label">
                  权利类型：
                </div>
                <div class="value">
                  {{ item.rightType }}
                </div>
              </div>
              <div class="row-item">
                <div class="label">
                  权利性质：
                </div>
                <div class="value">
                  {{ item.rightNature }}
                </div>
              </div>
              <div class="row-item">
                <div class="label">
                  用途：
                </div>
                <div class="value">
                  {{ item.purpose }}
                </div>
              </div>
            </div>
            <div class="row">
              <div class="row-item">
                <div class="label">
                  土地使用权面积：
                </div>
                <div class="value">
                  {{item.landUseRightArea}}平方米
                </div>
              </div>
              <div class="row-item">
                <div class="label">
                  房屋建筑面积：
                </div>
                <div class="value">
                  {{item.buildingArea}}平方米
                </div>
              </div>
              <div class="row-item">
                <div class="label">
                  使用期限：
                </div>
                <div class="value">
                  {{item.serviceLife}}
                </div>
              </div>
            </div>
            <div class="row">
              <div class="row-item">
                <div class="label">
                  权力其他状况：
                </div>
                <div class="value">
                  {{ item.otherRight }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="gva-pagination">
      <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total" layout="prev, pager, next"
        @current-change="handleCurrentChange" />
    </div>
    <ldCard ref="cardRef"></ldCard>
  </div>
</template>
<script setup>
import {
  ownershipTotal,
  ownershipList
} from '@/api/chaxuntongji'
import ldCard from '@/components/ldCard.vue'
import { reactive, ref, onMounted } from 'vue'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { ElMessage, ElMessageBox, useFormItem } from 'element-plus'

// 通过该函数，可以获取组件当前所在的表单项formItem
const { formItem } = useFormItem()

defineOptions({
  name: 'Yygl'
})
const appStore = useAppStore()
const form = ref({
  ico: '',
  jumpType: '',
  jumpUrl: '',
  name: '',
  type: ''
})
const cardRef = ref(null)
function openCard(row){
  if(cardRef.value){
    cardRef.value.openCard(row)
  }
}
const searchInfo = ref({
  certificateNo:'',
  buildingName:'',
  address:''
})

const userStore = useUserStore()
const headerOdj = ref({ token: userStore.token })
const adminUrl = ref('')
adminUrl.value = import.meta.env.VITE_BASE_PATH + '/file/upload'
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const dialogFormVisible = ref(false)
let validateImage = (rule, value, callback) => {
  if (!form.value.ico) {
    callback(new Error('请上传图片'))
  } else {
    callback()
  }
}
const rules = reactive({
  name: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
  ico: [{ required: true, validator: validateImage, trigger: 'change' }],
  type: [{ required: true, message: '请选择应用类别', trigger: 'change' }],
  jumpType: [{ required: true, message: '请选择跳转类型', trigger: 'change' }]
})

const yyglForm = ref(null)

const initForm = () => {
  yyglForm.value.resetFields()
  form.value = {
    ico: '',
    jumpType: '',
    jumpUrl: '',
    name: '',
    type: ''
  }
  fileList.value = []
}

const checkedColumns = ref(['应用名称', '应用图标', '应用类别', '跳转类型', '状态', '操作'])

if (localStorage.getItem('columnData') && JSON.parse(localStorage.getItem('columnData')).yygl) {
  checkedColumns.value = JSON.parse(localStorage.getItem('columnData')).yygl
}
const columns = ref(['应用名称', '应用图标', '应用类别', '跳转类型', '状态', '操作'])
const handleColumnsChange = (val) => {
  let obj = {

  }
  if (localStorage.getItem('columnData')) {
    obj = JSON.parse(localStorage.getItem('columnData'))
  }
  obj.yygl = val
  localStorage.setItem('columnData', JSON.stringify(obj))
}
const isEdit = ref(false)
const dialogTitle = ref('新增应用')
const addUnit = () => {
  dialogTitle.value = '新增应用'
  isEdit.value = false
  dialogFormVisible.value = true
}
const closeDialog = () => {
  initForm()
  dialogFormVisible.value = false
}

const handleClose = (done) => {
  initForm()
  done()
}
const handleUserClose = (done) => {
  initUserForm()
  done()
}
const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}
const tableData = ref([])
// 查询
const getTableData = async () => {
  const res = await ownershipList({
    pageNumber: page.value,
    pageSize: pageSize.value,
    ...searchInfo.value
  })
  if (res.code == 200) {
    tableData.value = res.result.data
    total.value = res.result.total
  }
}
getTableData()
const quanshuInfo = ref({})
onMounted(() => {
  ownershipTotal().then(res=>{
    quanshuInfo.value = res.result
  })
})

const enterDialog = async () => {
  yyglForm.value.validate(async (valid) => {
    if (valid) {
      let res
      if (isEdit.value) {
        res = await updateApplication(form.value)
      } else {
        res = await createApplication(form.value)
      }
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: isEdit.value ? '编辑成功' : '添加成功!'
        })
        getTableData()
      }
      initForm()
      dialogFormVisible.value = false
    }
  })
}

const delUnit = (row) => {
  ElMessageBox.confirm(
    '确认删除?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    const res = await deleteApplication(row.id)
    if (res.code === 200) {
      ElMessage({
        type: 'success',
        message: '删除成功!'
      })
      getTableData()
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    })
  })
}

const editUnit = async (row) => {
  isEdit.value = true
  dialogTitle.value = '编辑应用'
  form.value = JSON.parse(JSON.stringify(row))
  form.value.applicationId = form.value.id
  if (form.value.ico) {
    fileList.value = [{
      name: '1',
      url: form.value.ico
    }]
  }
  dialogFormVisible.value = true
}
const statusChange = (id, val) => {
  changeStatus(id).then(res => {
    ElMessage({
      type: 'success',
      message: '状态修改成功!'
    })
    getTableData()
  })
}
const onSubmit = () => {
  page.value = 1
  getTableData()
}

const onReset = () => {
  searchInfo.value = {
    name: '',
    type: ''
  }
  getTableData()
}


const fileList = ref([])
const handleRemove = (file) => {
  fileList.value = []
  form.value.ico = ''
}
const uploadSuccess = (res) => {
  if (res.code != 200) {
    ElMessage({
      type: 'error',
      message: '上传失败' + res.msg
    })
    fileList.value.pop()
    return
  }
  form.value.ico = res.result
  yyglForm.value.validateField('ico')
}

</script>

<style lang="scss">
.unit-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #FFFFFF;
  box-shadow: 0px 4px 15px 0px rgb(0 0 0 / 6%);
  border-radius: 14px;
  padding: 0.5vw;

  .unit-panel-item {
    flex: 1;
    display: flex;
    padding: 1vw;
    margin: 0.5vw;
    border-radius: 7px;

    img {
      width: 43px;
      height: 43px;
    }

    .unit-panel-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 1vw;
      font-size: 14px;
    }

    .unit-panel-num {
      font-size: 19px;
      font-family: Roboto Condensed;
    }
  }
}

.lists {
  .item {
    display: flex;
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
    .img {
      width: 200px;
      height: 140px;
      border-radius: 5px;
      margin-right: 10px;
    }

    .right {
      flex: 1;

      .top-title {
        display: flex;

        div {
          display: flex;
          align-items: center;
          margin-right: 20px;

          .title-icon {
            margin-right: 4px;
            width: 20px;
            height: 20px;
          }
        }
      }

      .info {
        .row {
          display: flex;
          margin: 8px 0;

          .row-item {
            display: flex;
            flex: 1;

            .label {
              text-align: left;
              font-weight: 500;
              color: #999999;
            }

            .value {
              flex: 1;
              font-weight: 500;
              color: #333333;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
}
</style>
